<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./jquery.js"></script>
<style>
    .div1{
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
    .div2{
        width: 200px;
        height: 200px;
        background-color: darkblue;
    }
    .test{
    
        background-color: blue;
        color: red;
        font-size: 50px;
    }
    
</style>
<body>

    <div id="tw" style="width:200px;height:200px"></div>
    <button id="btn">开始游戏</button>
    <div class="div1">唐玮</div>
    <div class="div2">傻逼</div>

 <img src="./favicon.ico" alt="">

    <div><p id="p_div">唐玮帅哥</p></div>

    <table border="1">
        <tr style="display:none"><td>Value 1</td></tr>
        <tr><td>Value 2</td></tr>
      </table>



      <input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />


<div id="cdtw.com" name="唐玮">唐玮</div>




    <script>
       
        $("#tw").css("background-color","red");

        //动画事件
        $("#btn").click(()=>{
           
            $("div:not(:animated)").animate({width:"+=20",height:"+=10"},1000);//animate({参数},时间)
        })

        //contains数()返回包含内容的元素
        console.log($("div:contains('唐玮')"));

        //为空元素empty,内容为空的元素
        console.log($("div:empty"));

        //has,里面有的元素
        $("div:has(p)").addClass("test");
console.log("__________________");
        //父级
        console.log($("#p_div:parent"));//p的父级找到的还是p标签

        //所以表标签不能又按id，class又找父子元素，要分开执行
        console.dir($("#p_div").parent());

        //匹配隐藏的元素
        console.log($("tr:hidden"));


        //设置元素的checked  attr(属性,true)
        $("[name='newsletter']").attr("checked", true);
        //设置元素不为
        $("[name!='newsletter']").attr("checked", true);
console.log("___________________________");

//     属性开头 ^
        console.log($("[name^='new']"));
        //属性结尾 $

        //属性包含 *

        //任意多个属性选择
        console.log($("div[id][name='唐玮']"));//表示div既有id还有name属性等于唐玮

        console.log("___________________");
        //返回所以img的src
        console.log($("img").attr("src"));
       console.log($("img").attr("src",()=>{return this.src}));
   </script>
</body>
</html>